<template>
    <div class="doctor-section">
        <!-- Department Navigation -->
        <div class="department-nav">
            <button v-for="dept in departments" :key="dept.id"
                :class="['dept-btn', selectedDept === dept.id ? 'active' : '']" @click="selectDepartment(dept.id)">
                {{ dept.name }}
            </button>
        </div>

        <!-- Doctors Grid -->
        <div class="doctors-container">
            <div v-for="doctor in doctors" :key="doctor.id" class="doctor-card" @click="viewDoctorNewPage(doctor.id)">
                <!-- Doctor Image -->
                <div class="doctor-image">
                    <img :src="doctor.avatar" :alt="doctor.name">
                </div>

                <!-- Doctor Info -->
                <div class="doctor-info">
                    <!-- Name and Title in one line -->
                    <div class="doctor-name-title">
                        <span class="doctor-name">{{ doctor.name }}</span>
                        <span class="doctor-title">{{ doctor.get_title_display }}</span>
                    </div>

                    <!-- Hospital and Department in two lines -->
                    <div class="doctor-details">
                        <div>{{ doctor.hospital }}</div>
                        <div>{{ doctor.department }}</div>
                    </div>

                    <!-- Rating and Consultation Count in one line -->
                    <div class="rating-consult">
                        <div class="doctor-rating">
                            <span class="rating">{{ doctor.rating }}</span>
                            <span class="star-icon">★</span>
                        </div>
                        <span class="separator">|</span>
                        <span class="consult-count">{{ doctor.consultation_count }}人问诊</span>
                    </div>

                    <!-- Limited introduction text -->
                    <p class="introduction" v-html="doctor.introduction.slice(0, 37) + '...'"></p>

                    <!-- Price and Consult Button in two lines -->
                    <div class="price-action">
                        <span class="price">¥{{ doctor.consultation_price }}/次</span>
                        <button class="consult-btn">立即咨询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const departments = ref([]);
const doctors = ref([]);
const selectedDept = ref('');

// Fetch departments list and set default department to the first one
const fetchDepartments = async () => {
    try {
        const response = await fetch('http://127.0.0.1:8000/doctor/department/1/');
        departments.value = await response.json();

        // 将“全部科室”按钮添加到列表的最后
        departments.value.push({ id: 'all', name: '全部科室' });

        if (departments.value.length > 1) {
            selectedDept.value = departments.value[0].id;
            fetchDoctors(selectedDept.value);
        }
    } catch (error) {
        console.error('Error fetching departments:', error);
    }
};

// Fetch doctors list
const fetchDoctors = async (departmentId: string) => {
    try {
        const url = departmentId === 'all'
            ? 'http://127.0.0.1:8000/doctor/doctor/all/'
            : `http://127.0.0.1:8000/doctor/doctor/${departmentId}/`;
        const response = await fetch(url);
        doctors.value = await response.json();
    } catch (error) {
        console.error('Error fetching doctors:', error);
    }
};

// Department selection handler with redirection for 'all' department
const selectDepartment = (deptId: string) => {
    if (deptId === 'all') {
        window.open('/sections', '_blank'); // 新页面打开“全部科室”
    } else {
        selectedDept.value = deptId;
        fetchDoctors(deptId);
    }
};

// View doctor detail handler that opens in a new tab
const viewDoctorNewPage = (doctorId: number) => {
    const doctorUrl = `/doctor/${doctorId}`;
    window.open(doctorUrl, '_blank'); // 在新标签页中打开
};

// Fetch both departments and initial doctors on mount
onMounted(() => {
    fetchDepartments();
});
</script>

<style scoped>
/* 样式保持不变 */
.doctor-section {
    padding: 50px 60px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #edfdfa;
    margin-top: 20px;
}

.department-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-bottom: 1rem;
}

.dept-btn {
    font-size: 1.125rem;
    padding: 10px 20px;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #374151;
    transition: background-color 0.2s;
    border: none;
    white-space: nowrap;
}

.dept-btn.active {
    background-color: #10b981;
    color: white;
}

.dept-btn:hover {
    background-color: #10b981;
}

.doctors-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .doctors-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .doctors-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.doctor-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(11, 243, 239, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s;
    cursor: pointer;
}

.doctor-card:hover {
    box-shadow: 0 8px 12px rgba(5, 121, 92, 0.783);
}

.doctor-image img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 1rem auto;
    display: block;
    border: 4px solid #f0f0f0;
}

.doctor-info {
    padding: 1rem;
    text-align: center;
}

.doctor-name-title {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: baseline;
}

.doctor-name {
    font-size: 1.125rem;
    font-weight: bold;
    color: #111827;
}

.doctor-title {
    font-size: 0.875rem;
    color: #6b7280;
    margin-left: 10px;
}

.doctor-details {
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

.rating-consult {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #9ca3af;
}

.doctor-rating {
    display: flex;
    align-items: center;
    color: #fbbf24;
}

.star-icon {
    font-size: 1rem;
    color: #fbbf24;
    margin-left: 0.25rem;
}

.separator {
    margin: 0 0.5rem;
}

.rating {
    font-size: 1rem;
    font-weight: 600;
}

.consult-count {
    font-size: 0.875rem;
    color: #9ca3af;
}

.introduction {
    color: #4b5563;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.price-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.price {
    color: #10b981;
    font-weight: 600;
}

.consult-btn {
    padding: 0.5rem 1rem;
    background-color: #10b981;
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    border: none;
}

.consult-btn:hover {
    background-color: #059669;
}
</style>
